import { useRef, useState } from "react";
import CustomCalendar from "./CustomCalendar";
import CustomCalendar2 from "./CustomCalendar2";

export default function Calendar() {

    /* 
    两个组件的差异
    - CustomCalendar2：更加灵活，因为它不仅可以受控（通过 props.value 和 onChange 传递控制），还可以通过 ref 直接获取和修改日期，适合需要外部控制内部状态的场景。
        - 通过 React.forwardRef 和 useImperativeHandle 使得组件可以通过 ref 操作，增加了灵活性。
        - 使用 useControllableValue 提供了更灵活的受控和非受控状态管理方式。
        - 更好的 TypeScript 类型提示，支持 ref 操作的语法提示。
    - CustomCalendar：比较适合简单场景，只通过内部状态控制和 onChange 回调来更新父组件，不支持通过 ref 操作，灵活性相对较低。
    */

    //  使用ref 操作 CustomCalendar2 需要注意不能给 value 属性
    // 如果给上value属性 那么 CustomCalendar2 会变成受控组件，完全由父组件的 setSelectedDate 控制
    // 如果没有 value 属性 那么 该组件是非空受控组件 依赖于内部的状态
    // @ts-ignore
    const calendarRef = useRef<CalendarRef>(null);
    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
    const handleGetDate = () => {
        // 通过 ref 获取日期
        const selectedDate = calendarRef.current?.getDate();
        if (selectedDate) {
            alert(`当前选中的日期是：${selectedDate.toLocaleDateString()}`);
        }
    };

    const handleSetDate = () => {
        // 通过 ref 设置日期
        const newDate = new Date(2023, 9, 15);  // 设置为 2023年10月15日
        calendarRef.current?.setDate(newDate);
        alert(`日期已设置为：${newDate.toLocaleDateString()}`);
    };


	return (
		<div>
			<CustomCalendar
				onChange={(val) => {
					console.log(val.toLocaleString());
				}}
			/>
            {/* 通过切换 defaultValue 和 value 感受受控与非受控区别 */}
			<CustomCalendar2
                ref={calendarRef}
                defaultValue={selectedDate} 
				onChange={(val) => {
					console.log(val.toLocaleString());
				}}
			/>
            <button onClick={handleGetDate}>获取当前日期</button>
            <button onClick={handleSetDate}>ref设置日期为 2023-10-15</button>
            <button onClick={() => setSelectedDate(new Date(2023, 10, 15))}>{`<受控组件>`}设置日期为 2023-11-15</button>
		</div>
	);
}
